<template>
  <div class="flex flex-col w-full">
    <re-input title="姓名" titleWidth="6">
      <el-input placeholder="请输入内容" v-model="name" />
    </re-input>
    <re-input title="角色" titleWidth="6" style="margin-top: 1.5rem">
      <el-select
        v-model="role"
        placeholder="请选择"
        :loading="loading"
        loading-text="加载数据中"
        style="width: 100%"
      >
        <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.roleName"
          :value="item.key"
        >
        </el-option>
      </el-select>
    </re-input>
    <re-input title="学号" titleWidth="6" style="margin-top: 1.5rem">
      <el-input placeholder="请输入内容" v-model="staffNumber" />
    </re-input>
    <re-input title="用户名" titleWidth="6" style="margin-top: 1.5rem">
      <el-input
        placeholder="请输入内容"
        v-model="userName"
        disabled=""
      ></el-input>
    </re-input>
    <re-input
      title="禁用"
      titleWidth="6"
      :hasRight="true"
      style="margin-top: 1.5rem; height: 40px"
    >
      <div class="flex justify-center items-center w-full h-full">
        <el-switch
          v-model="isDisabled"
          active-color="#ff1b00"
          inactive-color="#c9d8cd"
        ></el-switch>
      </div>
    </re-input>

    <el-button
      style="margin-top: 1.5rem"
      type="primary"
      icon="el-icon-upload"
      @click="clickSumbit()"
      >提交
    </el-button>
  </div>
</template>

<script lang="ts">
import { computed, onMounted, ref } from "vue";
import { getRoleList, RoleUpdateDTO } from "/@/api/role";
import { modifyStaff } from "/@/api/staff";
import ReInput from "/@/components/ReInput/index.vue";
import { useStaffStoreHook } from "/@/store/modules/staff";
import { errorMessage, successMessage } from "/@/utils/message";

export default {
  components: {
    ReInput
  },
  emits: ["emitUpdate"],
  setup(prop, context) {
    const roleList = ref<RoleUpdateDTO[]>([]);
    const loading = ref<boolean>(true);
    const staffStore = useStaffStoreHook();
    const name = computed({
      get: () => staffStore.name,
      set: value => staffStore.setStaffName(value)
    });
    const role = computed({
      get: () => staffStore.role,
      set: value => staffStore.setStaffRole(value)
    });
    const staffNumber = computed({
      get: () => staffStore.staffNumber,
      set: value => staffStore.setStaffNumber(value)
    });
    const userName = computed({
      get: () => staffStore.userName,
      set: value => staffStore.setStaffUserName(value)
    });
    const isDisabled = computed({
      get: () => staffStore.isDisable,
      set: value => staffStore.setStaffIsDisable(value as boolean)
    });

    const clickSumbit = async () => {
      const res = await modifyStaff({
        id: staffStore.id,
        name: staffStore.name,
        role: staffStore.role,
        staffNumber: staffStore.staffNumber,
        userName: staffStore.userName,
        isDisable: staffStore.isDisable ? 1 : 0
      });
      if (res.code === 1) {
        successMessage(res.message);
        context.emit("emitUpdate");
      } else {
        errorMessage(res.message);
      }
    };

    onMounted(async () => {
      const data = await getRoleList();
      roleList.value = data.response;
      loading.value = false;
    });
    return {
      loading,
      roleList,
      clickSumbit,
      name,
      role,
      staffNumber,
      userName,
      isDisabled
    };
  }
};
</script>

<style scoped></style>
